﻿/// <reference path="framework.js" />
/// <reference path="framework-UI.js" />
RexToy.registerType('RexToy.UI.Controls.ButtonStyleUtil');
RexToy.UI.Controls.ButtonStyleUtil.setButtonClass = function (dom, action, palette) {
    var s = {
        up: String.format('ui-btn-up-{0}', palette),
        down: String.format('ui-btn-down-{0}', palette),
        hover: String.format('ui-btn-hover-{0}', palette)
    };
    for (var p in s) {
        if (s.hasOwnProperty(p)) {
            if (p == action) {
                dom.appendClass(s[p]);
            } else {
                dom.removeClass(s[p]);
            }
        }
    }
};

RexToy.registerType('RexToy.UI.Controls.ButtonBase', RexToy.UI.Controls.Control);
RexToy.UI.Controls.ButtonBase.extend({
    properties: {
        enable: true,
        text: String.Empty
    },

    events: ['onclick'],

    $constructor: function (text) {
        this.__palette = 'b';
        this.__text = text;
        this.__domNode = RexToy.UI.Controls.DomNode.create({
            tag: 'a',
            className: 'ui-btn ui-shadow ui-btn-corner-all',
            items: [{
                tag: 'span',
                $name: 'spn',
                className: 'ui-btn-inner ui-btn-corner-all',
                items: [{
                    tag: 'span',
                    $name: 'content',
                    className: 'ui-btn-text',
                    innerHTML: this.__text
                }]
            }]
        });

        this.__domNode.attachEvent('onmouseout', this.mouseup.bind(this))
            .attachEvent('onmousedown', this.mousedown.bind(this))
            .attachEvent('onmouseover', this.mouseover.bind(this))
            .attachEvent('onmouseup', this.mouseup.bind(this));
        this.__domNode.attachEvent('onclick', this._onclick.bind(this));
        this.setButtonClass('up');
    },

    setText: function (val) {
        this.__text = val;
        var dom = this.__domNode.$('content');
        dom._element.innerHTML = val;
    },

    setButtonClass: function (status) {
        if (this.__enable === true) {
            RexToy.UI.Controls.ButtonStyleUtil.setButtonClass(this.__domNode, status, this.__palette);
        }
    },

    mouseup: function () {
        this.setButtonClass('up');
    },

    mousedown: function () {
        this.setButtonClass('down');
    },

    mouseover: function () {
        this.setButtonClass('hover');
    },

    setPalette: function (palette) {
        this.setButtonClass('none');
        this.__palette = palette;
        this.setButtonClass('up');
    },

    setStandalone: function (standalone) {
        var dom = this.__domNode.$('spn');
        if (standalone === true) {
            this.__domNode.appendClass('ui-btn-corner-all');
            this.__domNode.appendClass('ui-shadow');
            dom.appendClass('ui-btn-corner-all');
        }
        if (standalone === false) {
            this.__domNode.removeClass('ui-btn-corner-all');
            this.__domNode.removeClass('ui-shadow');
            dom.removeClass('ui-btn-corner-all');
        }
    },

    setEnable: function (enable) {
        if (enable === true) {
            this.setButtonClass('up');
            this.__domNode.removeClass('ui-disabled');
        }
        if (enable === false) {
            this.setButtonClass('up');
            this.__domNode.appendClass('ui-disabled');
        }

        this.__enable = enable;
    },

    _onclick: function () {
        if (this.__enable === true) {
            this.__fireEvent('onclick');
        }
    }
});

RexToy.registerType('RexToy.UI.Controls.Button', RexToy.UI.Controls.ButtonBase);
RexToy.UI.Controls.Button.extend({
    $constructor: function () {
    },

    setInline: function (inline) {
        if (inline === true) {
            this.__domNode.appendClass('ui-btn-inline');
            this.__orientation = RexToy.UI.Controls.Orientation.Horizental;
        }
        if (inline === false) {
            this.__domNode.removeClass('ui-btn-inline');
            this.__orientation = RexToy.UI.Controls.Orientation.Vertical;
        }
    },

    setFirst: function (first) {
        if (first === true) {
            if (this.__orientation == RexToy.UI.Controls.Orientation.Vertical)
                this.__domNode.appendClass('ui-corner-top');
            if (this.__orientation == RexToy.UI.Controls.Orientation.Horizental)
                this.__domNode.appendClass('ui-corner-left');
        }
        if (first === false) {
            if (this.__orientation == RexToy.UI.Controls.Orientation.Vertical)
                this.__domNode.removeClass('ui-corner-top');
            if (this.__orientation == RexToy.UI.Controls.Orientation.Horizental)
                this.__domNode.removeClass('ui-corner-left');
        }
    },

    setLast: function (last) {
        if (last === true) {
            if (this.__orientation == RexToy.UI.Controls.Orientation.Vertical)
                this.__domNode.appendClass('ui-corner-bottom');
            if (this.__orientation == RexToy.UI.Controls.Orientation.Horizental)
                this.__domNode.appendClass('ui-corner-right');
        }
        if (last === false) {
            if (this.__orientation == RexToy.UI.Controls.Orientation.Vertical)
                this.__domNode.removeClass('ui-corner-bottom');
            if (this.__orientation == RexToy.UI.Controls.Orientation.Horizental)
                this.__domNode.removeClass('ui-corner-right');
        }
    }
});

RexToy.registerType('RexToy.UI.Controls.IconPosition');
RexToy.UI.Controls.IconPosition = {
    Left: 'left',
    Right: 'right',
    Top: 'top',
    Bottom: 'bottom',
    NoText: 'notext'
};

RexToy.registerType('RexToy.UI.Controls.IconButton', RexToy.UI.Controls.ButtonBase);
RexToy.UI.Controls.IconButton.extend({
    properties: {
        icon: 'ui-icon-check'
    },

    $constructor: function (txt, iconPosition) {
        var pos = iconPosition || RexToy.UI.Controls.IconPosition.Left;
        this.__domNode.appendClass(String.format('ui-btn-icon-{0}', pos));
        var dom = this.__domNode.$('spn');
        this.iconNode = RexToy.UI.Controls.DomNode.create({
            tag: 'span',
            className: 'ui-icon ui-icon-shadow'
        });
        this.iconNode.appendClass(this.__icon);
        dom.appendChild(this.iconNode);
    },

    setIcon: function (val) {
        this.iconNode.replaceClass(this.__icon, val);
        this.__icon = val;
    }
});

RexToy.registerType('RexToy.UI.Controls.Content', RexToy.UI.Controls.Control);
RexToy.UI.Controls.Content.extend({
    properties: {
        text: String.Empty
    },

    $constructor: function (text, tag) {
        this.__text = text;
        this.__domNode = RexToy.UI.Controls.DomNode.create({
            tag: tag || 'p',
            innerHTML: this.__text
        });
    },

    setText: function (val) {
        this.__text = val;
        this.__domNode._element.innerHTML = val;
    }
});

RexToy.registerType('RexToy.UI.Controls.TextBox', RexToy.UI.Controls.Control);
RexToy.UI.Controls.TextBox.extend({
    properties: {
        text: String.Empty,
        isPassword: false,
        enable: true,
        readonly: false,
        selectable: true
    },

    events: ['onblur', 'ontextchange'],

    $constructor: function (text, hint, placeholder) {
        this.__text = text || String.Empty;
        this.__palette = 'c';
        this.__domNode = RexToy.UI.Controls.DomNode.create({
            tag: 'div',
            className: 'ui-field-contain ui-body ui-br',
            items: [
                {
                    tag: 'label',
                    $name: 'hint',
                    className: 'ui-input-text',
                    innerHTML: hint
                },
                {
                    tag: 'input',
                    $name: 'input',
                    className: 'ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c',
                    placeholder: placeholder || 'Input Value',
                    value: this.__text
                }
            ]
        });
        var input = this.__domNode.$('input');
        input.attachEvent('onkeyup', this._onkeyup.bind(this)).attachEvent('onblur', this._onblur.bind(this));
    },

    setReadonly: function (readonly) {
        this.__readonly = readonly;
        var dom = this.__domNode.$('input');

        if (readonly === true)
            dom.setAttribute('readOnly', true);
        if (readonly === false)
            dom.setAttribute('readOnly', null);
    },

    setEnable: function (enable) {
        if (enable === true) {
            this.__domNode.appendClass('ui-disabled');
        }
        if (enable === false) {
            this.__domNode.appendClass('ui-disabled');
        }

        this.__enable = enable;
        this.setReadonly(!enable);
    },

    setInputType: function (type) {
        /// <summary>Set input type</summary>
        /// <param name = "type">can be password/ email/ url etc</param>        
        var dom = this.__domNode.$('input');
        try {
            if (type == 'calendar' || type == 'date') {
                dom._element.type = 'text';
            } else {
                dom._element.type = type;
            }
        } catch (e) {//Note: if not a valid type, degrade to text
            dom._element.type = 'text';
        };

        if (!this.__showCalendar) {
            this.__showCalendar = this._showCalendar.bind(this);
        };

        if (type == 'calendar' || type == 'date') {
            dom.attachEvent('onfocus', this.__showCalendar);
        } else {
            dom.detachEvent('onfocus', this.__showCalendar);
        }
    },

    _showCalendar: function () {
        var host = this;
        if (!this.calendar) {
            this.calendar = new RexToy.UI.Controls.Calendar();
            this.calendar.renderInto();
            this.calendar.attachEvent('onselect', function (sender) {
                var c = sender;
                var d = { year: c.getYear(), month: c.getMonth(), date: c.getDate() };
                var v = RexToy.L10N.DateFormatter.format(d);
                host.setText(v);
            });
        }
        var val = this.getText();
        if (!String.isNullOrEmpty(val)) {
            val = RexToy.L10N.DateFormatter.parse(this.getText());
            this.calendar.setYear(val.year);
            this.calendar.setMonth(val.month);
            this.calendar.setDate(val.date);
        }
        var dom = this.__domNode.$('input');
        var x = dom.getAbsoluteX();
        var y = dom.getAbsoluteY() + dom.getHeight();
        this.calendar.show(new RexToy.UI.Point(x, y));
    },

    setPalette: function (val) {
        var dom = this.__domNode.$('input');
        var template = 'ui-body-{0}';
        dom.replaceClass(String.format(template, this.__palette), String.format(template, val));
        this.__palette = val;
    },

    getText: function () {
        var dom = this.__domNode.$('input');
        this.__text = dom._element.value;
        return this.__text;
    },

    setText: function (text) {
        this.__text = text;
        var dom = this.__domNode.$('input');
        dom._element.value = text;

        if (this.__enable)
            this._onkeyup();
    },

    _onkeyup: function () {
        this.__fireEvent('ontextchange');
    },

    _onblur: function () {
        this.__fireEvent('onblur');
    }
});

RexToy.registerType('RexToy.UI.Controls.TextArea', RexToy.UI.Controls.Control);
RexToy.UI.Controls.TextArea.extend({
    properties: {
        text: String.Empty,
        enable: true,
        readonly: false,
        selectable: true
    },

    events: ['onblur', 'ontextchange'],

    $constructor: function (text, hint, placeholder) {
        this.__text = text || String.Empty;
        this.__palette = 'c';
        this.__domNode = RexToy.UI.Controls.DomNode.create({
            tag: 'div',
            className: 'ui-field-contain ui-body ui-br',
            items: [
                {
                    tag: 'label',
                    $name: 'hint',
                    className: 'ui-input-text',
                    innerHTML: hint
                },
                {
                    tag: 'textarea',
                    $name: 'input',
                    className: 'ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c',
                    placeholder: placeholder || 'Input Value',
                    value: this.__text
                }
            ]
        });
        var input = this.__domNode.$('input');
        input.attachEvent('onkeyup', this._onkeyup.bind(this)).attachEvent('onblur', this._onblur.bind(this));
    },

    setReadonly: function (readonly) {
        this.__readonly = readonly;
        var dom = this.__domNode.$('input');

        if (readonly === true)
            dom.setAttribute('readOnly', true);
        if (readonly === false)
            dom.setAttribute('readOnly', null);
    },

    setEnable: function (enable) {
        if (enable === true) {
            this.__domNode.appendClass('ui-disabled');
        }
        if (enable === false) {
            this.__domNode.appendClass('ui-disabled');
        }

        this.__enable = enable;
        this.setReadonly(!enable);
    },

    setPalette: function (val) {
        var dom = this.__domNode.$('input');
        var template = 'ui-body-{0}';
        dom.replaceClass(String.format(template, this.__palette), String.format(template, val));
        this.__palette = val;
    },

    getText: function () {
        var dom = this.__domNode.$('input');
        this.__text = dom._element.value;
        return this.__text;
    },

    setText: function (text) {
        this.__text = text;
        var dom = this.__domNode.$('input');
        dom._element.value = text;

        if (this.__enable)
            this._onkeyup();
    },

    _onkeyup: function () {
        this.__fireEvent('ontextchange');
    },

    _onblur: function () {
        this.__fireEvent('onblur');
    }
});

RexToy.registerType('RexToy.UI.Controls.Spin', RexToy.UI.Controls.Control);
RexToy.UI.Controls.Spin.extend({
    properties: {
        text: String.Empty
    },

    $constructor: function (text) {
        this.__text = text;
        this.__domNode = RexToy.UI.Controls.DomNode.create({
            tag: 'div',
            className: 'ui-loader ui-body-a ui-corner-all',
            items: [
                {
                    tag: 'span',
                    className: 'ui-icon ui-icon-loading spin'
                },
                {
                    tag: 'h1',
                    $name: 'h1',
                    innerHTML: text
                }
            ]
        });
    },

    display: function (show) {
        var style = this.__domNode.getStyle();
        style.display = show ? 'block' : 'none';

        var t = (RexToy.UI.Window.getSize().getHeight() - this.getSize().getHeight()) / 2;
        style.marginTop = t + 'px';
    },

    setText: function (val) {
        this.__text = val;
        var dom = this.__domNode.$('h1');
        dom._element.innerHTML = val;
    }
});